<template>
    <div class="activity">
        <top-bar title="活动推广"></top-bar>
        <van-button icon="orders-o" color="#224448" block @click="handleList"> 查看推广记录</van-button>
        <div class="list-wrapper">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
                <div v-for="item in list" :key="item.id" class="item" @click="goDetail(item)">
                    <p class="title">{{ item.title }}</p>
                    <img :src="item.image" alt="" class="img" />
                </div>
            </van-list>
        </div>
        <div class="tips">活动推广由酒店管理员发布，如有疑问请联系管理人员</div>
        <div class="add-btn" @click="handlePost">申请</div>
    </div>
</template>

<script>
import TopBar from "@/components/topBar.vue";
export default {
    name: "activity",
    data() {
        return {
            list: [],
            loading: true,
            finished: false,
            page: 0,
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            this.$api.activities({ page: ++this.page, type: 0 }).then((res) => {
                this.loading = false;
                if (res.status_code == 200) {
                    this.list.push(...res.data.data);
                    if (this.list.length >= res.data.total) {
                        this.finished = true;
                    }
                }
            });
        },
        handleList() {
            this.$router.push({
                path: "/activityList",
            });
        },
        goDetail(val) {
            this.$router.push({
                path: "/activityDetail",
                query: {
                    info: JSON.stringify(val),
                },
            });
        },
        handlePost() {
            this.$router.push({
                path: "/activityPost",
            });
        },
    },
    components: {
        TopBar,
    },
};
</script>

<style lang="scss">
.activity {
    .van-button {
        height: 40px;
    }
    .van-button--normal {
        font-size: 13px;
    }
}
</style>
<style lang="scss" scoped>
@supports (bottom: env(safe-area-inset-bottom)) {
    .activity {
        height: calc(100vh - 50px - constant(safe-area-inset-bottom)) !important;
        height: calc(100vh - 50px - env(safe-area-inset-bottom)) !important;
    }
    .list-wrapper {
        height: calc(100vh - 174px - constant(safe-area-inset-bottom)) !important;
        height: calc(100vh - 174px - env(safe-area-inset-bottom)) !important;
    }
}
.activity {
    height: calc(100vh - 50px);
    background-color: #f4f4f4;
    position: relative;
    .list-wrapper {
        height: calc(100vh - 174px);
        overflow-y: auto;
        .item {
            background-color: #fff;
            padding: 20px 15px;
            margin-bottom: 10px;
            .title {
                font-size: 16px;
                font-weight: bold;
                color: #333333;
                line-height: 20px;
                margin-bottom: 12px;
            }

            .img {
                display: block;
                width: 100%;
                height: auto;
                border-radius: 5px;
                // object-fit: cover;
            }
        }
    }

    .tips {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: rgba($color: #000000, $alpha: 0.75);
        font-size: 12px;
        font-weight: 500;
        color: #ffffff;
    }

    .add-btn {
        position: absolute;
        bottom: 55px;
        right: 15px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: #224448;
        border-radius: 50%;
        font-size: 14px;
        font-weight: 500;
        color: #ffffff;
    }
}
</style>
